<template>
  <div class="oneLineImgCode">
    <el-form inline size="medium" v-if="form">
      <el-form-item label="大标题：">
        <el-input v-model="form.title" placeholder="大标题"></el-input>
      </el-form-item>
      <el-form-item label="描述：">
        <el-input v-model="form.desc" placeholder="描述"></el-input>
      </el-form-item>
    </el-form>
    <div class="t_l">
      <el-upload
        :action="imgUpload"
        :file-list="iconList"
        list-type="picture"
        :limit="3"
        :on-preview="handlePictureCardPreview"
        :on-success="uploadIconSuccess"
        :on-remove="handleRemove"
      >
        <el-button type="success">上传icon图片</el-button>
      </el-upload>
    </div>

    <div class="t_l">
      <el-upload
        :action="imgUpload"
        :file-list="fileList"
        list-type="picture"
        :limit="2"
        :on-preview="handlePictureCardPreview"
        :on-success="uploadSuccess"
        :on-remove="handleRemove"
      >
        <el-button type="success">上传两张图片</el-button>
      </el-upload>
      <el-form>
        <el-form-item
          :label="'第'+ (Number(index)+1) +'个图片的链接：'"
          v-for="(item,index) in fileList"
          :key="index"
          class="mt20"
        >
          <el-input v-model="item.backUrl" placeholder="请输入链接地址" width="70%"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="t_l">
      <el-button type="success" @click="addTableList">添加列表</el-button>
      <el-table border :data="tableData">
        <el-table-column label="大标题" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.title" placeholder="添加大标题"/>
          </template>
        </el-table-column>
        <el-table-column label="小标题" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.subTitle" placeholder="添加小标题"/>
          </template>
        </el-table-column>
        <el-table-column label="链接" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.url" placeholder="添加链接地址"/>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <el-upload
              class="avatar-uploader"
              :action="imgUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" class="avatar"/>
              <el-button v-else size="mini" type="primary" @click="curRowIndex=scope.$index">上传图片</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column label="删除" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()" size="mini">取消</el-button>
      <el-button type="primary" @click="saveSinglEMapConf" size="mini">确定</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    name: "session",
    props: {
      moduleId: {
        type: String
      },
      fileList: {
        type: Array,
        default: () => {
          return [];
        }
      },
      iconList: {
        type: Array,
        default: () => {
          return [];
        }
      },
      tableData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      datas: {
        type: Object,
        default: () => {
          return {};
        }
      }

    }, data() {
      return {
        imgUpload:this.utils.imgUploadUrl,
        curRowIndex: null,
        title: "",
        desc: "",
        dialogImageUrl: "",
        dialogVisible: false,
        imageUrl: "",
        form: {
          title: "",
          desc: "",
        },
      };
    },
    methods: {
      close(){
        this.$router.push("/Pages/Configuration/Cms/CmsPages");
      },
      //删除列表中的数据
      handleDelete(index) {
        this.tableData.splice(index, 1);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadSuccess(file) {
        this.fileList.push({url: file.data.imgUrl, backUrl: ""});
      },
      uploadIconSuccess(file) {
        this.iconList.push({url: file.data.imgUrl, backUrl: ""});
      },
      handleAvatarSuccess(res, file) {
        let index = this.curRowIndex;
        this.tableData[index].imgUrl = file.response.data.imgUrl;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      //上传二级目录
      addTableList() {
        //取得列表长度
        let index = this.tableData.length;
        this.tableData.push({
          index: index,
          title: "",
          subTitle: "",
          url: "",
          imgUrl: ""
        });
      },
      // 保存配置
      saveSinglEMapConf() {
        let this_ = this;
        let variablesObject = {};
        variablesObject.imgUlrList = this_.fileList;
        variablesObject.title = this_.form.title;
        variablesObject.desc = this_.form.desc;
        variablesObject.icon = this.iconList;
        variablesObject.tableData = this_.tableData;
        this_.utils.request.cmsPageModuleAddModuleData(
          {
            templateDataType: 0,
            moduleId: this_.moduleId,
            variablesObject: variablesObject,
            platform: 1
          },
          res => {
            if (res.code === "0000") {
              // this.MoreMapDialogVisible=false
              //            this_.singlList = [];
              // this_.$emit('MoreMapDialogVisibleFun');
              this_.$emit("getIndex"); //从父页面发射指令给子页面;
              this_.$message({message: "保存成功", type: "success"});
            } else {
              this_.$message({message: res.msg, type: "error"});
            }
          }
        );
      }
    },
    mounted() {

      this.form = this.datas;
      console.log(this.form)
    }
  };
</script>
<style lang="scss" scoped>
  .oneLineImgCode {
    padding-top: 20px;
  }

  .el-button {
    margin-bottom: 5px;
  }

  .t_l {
    text-align: left;
    margin-top: 20px;
  }

  .avatar {
    width: 100px;
    height: 100px;
  }

  .dialog-footer {
    margin-top: 20px;
  }
</style>
